<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
        /* 标签选择器 */
        p {
            color: green;
        }

        div {
            color: pink;
        }

      /* 优点:快速的将页面中同类型的标签统一设置样式 */
      /* 缺点:不能差异化标签 */
      
      /* 类选择器 */
      .red {
          color: red;
          width: 100px;
          height: 100px;
          background-color: red;
      }
      .green {
          width: 100px;
          height: 100px;
          background-color:green;
      }
      .font35 {
          font-size: 35px;
      }
      /* 类选择器口诀:样式点定义 结构类调用 一个或多个 开发最常用*/

      #pink {
          color: pink;
      }
      /* id选择器：样式#定义，只能调用一次，别人切勿使用 */

      *{
          color: burlywood;
      }
      /* *通配符选择器选中所有标签 优先级最低 */
       
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
    <ul>
        <li class="red font35">小红</li>
        <li>小黄</li>
        <li class="red">小绿</li>
        <li>小黑</li>
    </ul>

    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>

    <div id="pink">我是可爱的小粉</div>
</body>
</html>